<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
<link href="css/main.css" rel="stylesheet"></head>

<body>
    <div class="wrapper">
        <!-- 图片区域 -->
        <div class="imageArea">
            <img src="" alt="">
        </div>
        <!-- 歌曲详情 -->
        <div class="songInfo">
            <h2 class="name"></h2>
            <div class="singer"></div>
            <div class="album"></div>
        </div>
        <!-- 进度条 -->
        <div class="progress">
            <div class="curTime">00:00</div>
            <div class="drag">
                <div class="circle"></div>
                <div class="frontBg"></div>
                <div class="backBg"></div>
            </div>
            <div class="totalTime"></div>
        </div>
        <!-- 菜单控制器 -->
        <ul class="ctrl">
            <li class="likeBtn">
            </li>
            <li class="prevBtn">
            </li>
            <li class="playBtn">
            </li>
            <li class="nextBtn">
            </li>
            <li class="listBtn ">
            </li>
        </ul>
        <!-- 播放列表 -->
        <div class="listArea">
            <div class="list">播放列表</div>
            <div class="content">
            </div>
            <div class="close">关闭</div>
        </div>
    </div>
    <audio src="" class="audio"></audio>
<script src="js/main.js"></script></body>

</html>